<template>
    <div class="param-main">
      <el-form ref="tblMain" :model="tblMain" labelPosition="right" inline="" label-suffix=":" label-width="100px">
        <!-- <el-row :span="24">
          <el-col :span="6">
            <el-form-item label="技能名称">
              <el-input v-model="tblMain.param.skillTypeName" size="small" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <div class="page-pane2">
          <el-button type="primary" size="small" @click="initTableData()">查询</el-button>
        </div>
      </el-form>
      <div style="height: calc(100% - 120px);">
        <el-table ref="tblMain" style="margin-top: 10px" :data="tblMain.items" @selection-change="handleSelectionChange"
          v-loading.body="tblMain.loading" border stripe height="100%">
          <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
          <el-table-column prop="skillTypeName" label="客户" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="skillTypeName" label="充值金额" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="parentName" label="兑换积分" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="skillPriceType" label="支付方式" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.skillPriceType == '0'">时薪</span>
              <span v-else-if="scope.row.skillPriceType == '1'">件薪</span>
            </template>
          </el-table-column>
          <el-table-column prop="skillDesc" label="状态" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="skillDesc" label="订单号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="skillDesc" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="skillDesc" label="完成时间" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination style="margin-top: 10px" :current-page.sync="tblMain.currentPage" :page-size="tblMain.pageSize"
          :total="tblMain.total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </template>
  <script>
  import tool from '@/tool'
  import { storeSkillTypeList, storeSkillTypeDel } from '@/api/index'
  export default {
    name: 'SkillList',
    components: {
    },
    data () {
      return {
        tblMain: tool.genTableData({
          param: {
            skillTypeName: ''
          },
          items: []
        })
      }
    },
    mounted () {
      this.initTableData()
    },
    methods: {
      handleAdd () {
        this.$refs.modalForm.add()
      },
      handleEdit (val) {
        this.$refs.modalForm.edit(val)
      },
      handleSetFunction (val) {
        this.$refs.roleFunction.set(val)
      },
      modalFormOk () {
        this.initTableData()
      },
      dataReset () {
        this.tblMain.currentPage = 1
        this.tblMain.pageSize = 10
        this.tblMain.param.skillTypeName = ''
        this.initTableData()
      },
      handleSelectionChange (val) {
        this.tblMain.selection = val
      },
      handleSizeChange (val) {
        this.tblMain.pageSize = val
        this.initTableData()
      },
      handleCurrentChange (val) {
        this.tblMain.currentPage = val
        this.initTableData()
      },
      initTableData () {
        let me = this
        me.tblMain.selection = []
        let param = {
          skillTypeName: me.tblMain.param.skillTypeName,
          page: me.tblMain.currentPage,
          size: me.tblMain.pageSize
        }
        me.tblMain.loading = true
        storeSkillTypeList(param).then((res) => {
          me.tblMain.loading = false
          let data = res.data
          if (data && data.code == 0) {
            me.tblMain.items = data.data.record
            me.tblMain.total = data.data.total
          }
        })
      }
    }
  }
  </script>
<style lang="less" scoped>
/deep/ .el-table .cell{
    line-height: 40px;
}
</style>